import SlimSelect, {type Config} from 'slim-select';

export type SelectSettings = Config['settings'];
export type SelectData = Config['data'];

export function setupSelect(
    elem: HTMLSelectElement | string,
    userSettings: SelectSettings = {},
    userData: SelectData = undefined
) {
    return new SlimSelect({
        select: elem,
        data: userData,
        settings: {
            searchPlaceholder: '搜索',
            searchText: '没有结果',
            searchingText: '搜索...',
            placeholderText: '请选择',
            maxValuesMessage: '已选择 {number} 个',
            addableText: '请按回车键↩️来添加 {value}',
            ...userSettings
        },
    })
}

export function setupSelectDefaultElems(user_settings: SelectSettings = {}) {
    const multiSelectElems = document.querySelectorAll("select[multiple]");
    multiSelectElems.forEach(elem => {
        setupSelect(elem as HTMLSelectElement, user_settings);
    })
}
